// 获取当前页面 url 后面 ?id=xxx
let searchObj = new URLSearchParams(location.search);
console.log(searchObj);
let pid = searchObj.get("id");
console.log(pid);
let detailProductAPI = "http://jx.xuzhixiang.top/ap/api/detail.php";
$.get(detailProductAPI, { id: pid }, function (r) {
  console.log(r);
  console.log(r.data);
  let pObj = r.data;
  console.log(pObj);
  if (pObj) {
    // 拼接模板字符串
    // 左边三个小图
    let strDetailThumUl = `
        <li>
            <img src="${pObj.pimg}" width="105" height='90' />
        </li>
        <li>
            <img src="${pObj.pimg}" width="105" height='90' />
        </li> 
        <li>
            <img src="${pObj.pimg}" width="105"  height='90'/>
        </li>  `;
    $(".detail-thum-ul").html(strDetailThumUl);

    //中间的大图
    let strDetailPic = `
        <img
          src="${pObj.pimg}"
          width="350"
         
        /> `;
    $(".detail-pic").html(strDetailPic);

    // 右边的点击加入购物车
    let strDetailSummary = `
    <h2>${pObj.pname}</h2>
    <p class="desc"></p>
    <div class="price l_Clearfix" id="price_tb">
      <strong class="c_Highlight">¥${pObj.pprice}</strong>
    </div>
    <div id="on_sale">
      <ul class="discount c_Highlight">
        <li>${pObj.pdesc}</li>
      </ul>
      <ul class="sold" style="">
        <li>
          评论数&nbsp;&nbsp;<span class="c_Highlight" id="month_sale_amount"
            >14</span
          >
        </li>
        <!--<li>累计销量&nbsp;&nbsp;<span class="c_Highlight" id="total_sale_amount"></span></li>-->
        <li>
          送积分&nbsp;&nbsp;<span class="c_Highlight" id="bonus">79</span>
        </li>
      </ul>
      <div id="prop_section">
        <div class="filter l_Clearfix" id="prop_1">
          <h3>尺码</h3>
          <ul>
            <li class="on">
              <span>M</span>
            </li>

            <li class="">
              <span>L</span>
            </li>

            <li class="">
              <span>XL</span>
            </li>

            <li class="disable" out_of_store="true">
              <span>XXL</span>
            </li>
          </ul>
        </div>
        <div class="number l_Clearfix">
          <h3>数量</h3>
          <div id="buy_amount">
            <span class="number-jian">-</span
            ><input type="text" value="1" min="1" id='numIpt'/><span class="number-jia">+</span>
          </div>
        </div>
        <div class="btns l_Clearfix">
          <a href="javascript:;" class="i_Btn i_Btn_big" id="buy"
            >加入购物车</a
          >
        </div>
      </div>
    </div>
  </div>
    `;
    // 将拼好的字符串赋值给div
    $(".detail-summary").html(strDetailSummary);

    let summaryNumIpt = 1;
    // 给 数量框左边的减号添加点击事件
    $(".number-jian").click(function () {
      console.log("点击了减号");
      if (summaryNumIpt <= 1) {
        summaryNumIpt = 1;
      } else {
        summaryNumIpt--;
      }
      $("#numIpt").val(summaryNumIpt);
    });

    // 给 数量框右边的加号添加点击事件
    $(".number-jia").click(function () {
      console.log("点击了加号");
      summaryNumIpt++;
      $("#numIpt").val(summaryNumIpt);
    });
    /*

      给用户购物车中添加商品 接口

      接口地址：http://jx.xuzhixiang.top/ap/api/add-product.php
      接口请求方式：get
      接口参数：
            uid  用户id
            pid  商品id
            pnum  要添加的商品数量
      */
    $("#buy").click(function () {
      let uid = localStorage.getItem("id");
      let pnum = $("#numIpt").val();
      let addCartAPI = "http://jx.xuzhixiang.top/ap/api/add-product.php";
      console.log(pnum);
      $.get(addCartAPI, { uid, pid, pnum }, function () {
        alert("加入购物车成功");
        if (uid) {
          location.href = "04-cart.html";
        } else {
          alert("请登录");
        }
      });
    });
  } else {
    alert("商品不存在");
  }
});
